<template>
  <div class="classList">
    <div class="classList_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">分类列表<i class="el-icon-close"></i></div>
    </div>

    <!-- 列表 -->
    <div class="classList_info">
      <!-- 新增按钮 -->
      <div class="classList_newBtn">
        <button @click="handerNewShop" style="margin-right: 20px">
          <i class="el-icon-trophy"></i>新增一级分类
        </button>
        卖场：
        <el-select
          v-model="marketId"
          clearable
          @change="selectMarket"
          filterable
          placeholder="请选择卖场"
        >
          <el-option
            v-for="item in marketList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 商品列表 -->
      <div class="shopList">
        <ul>
          <li
            class="shopList_item"
            v-for="(item, index) in cateList"
            :key="index"
          >
            <!-- 一级分类 -->
            <div class="shopList_primary">
              <div class="shopList_left">
                <img :src="item.cate_logo" mode="" />
                {{ item.cate_name }}
                <el-tag size="mini" style="margin-left: 10px">{{
                  item.market_name
                }}</el-tag>
              </div>
              <div class="shopList_right">
                <button @click="toShow(item.is_show, item.cate_id)">
                  {{ item.is_show == 1 ? "隐藏" : "显示" }}
                </button>
                <div
                  @click="
                    toAddScdCate(item.cate_id, item.cate_name, item.market_id)
                  "
                  title="新增二级分类"
                >
                  <i class="el-icon-plus"></i>
                </div>
                <div @click="toEditCate(item.cate_id)">
                  <i class="el-icon-edit"></i>
                </div>
                <div @click="toDelCate(item.cate_id)">
                  <i class="el-icon-delete"></i>
                </div>
              </div>
            </div>
            <!-- 二级分类 -->
            <ul class="shopList_second clearfix">
              <li v-for="(item1, index1) in item.child" :key="index1">
                <div class="shopList_left">
                  <img :src="item1.cate_logo" mode="" />
                  {{ item1.cate_name }}
                </div>
                <div class="shopList_right">
                  <button @click="toShow1(item1.is_show, item1.cate_id)">
                    {{ item1.is_show == 1 ? "隐藏" : "显示" }}
                  </button>
                  <div
                    @click="
                      toEditScdCate(item1.cate_id, item.cate_id, item.cate_name)
                    "
                  >
                    <i class="el-icon-edit"></i>
                  </div>
                  <div @click="toDelCate(item1.cate_id)">
                    <i class="el-icon-delete"></i>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateList: [], //分类
      priShow: "显示", //一级
      scdShow: "显示", //二级
      marketId: "", //卖场id
      marketList: [],
    };
  },
  mounted() {
    this.getCateList();
    this.remoteMethod();
  },
  methods: {
    // 获取卖场列表
    remoteMethod() {
      this.$http.post("/api/root/Market/marketList").then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },
    // 选择卖场
    selectMarket() {
      // this.page = 1
      // this.pageSize =10
      this.getCateList();
    },

    //   获取分类
    getCateList() {
      this.$http
        .post("/api/root/Cate/cateLst", { market_id: this.marketId })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.cateList = res.data ? res.data : [];
          }
        });
    },

    // 编辑一级分类
    toEditCate(id) {
      this.$router.push({ name: "newPrimaryClass", query: { id } });
    },

    //编辑二级分类
    toEditScdCate(id, pid, stepName) {
      this.$router.push({
        name: "newSecondaryClass",
        query: { id, pid, stepName },
      });
    },

    //点击一级分类加号
    toAddScdCate(pid, stepName, market_id) {
      this.$router.push({
        name: "newSecondaryClass",
        query: { pid, stepName, market_id },
      });
    },

    // 删除分类
    toDelCate(id) {
      console.log(id);
      this.$confirm("此操作将删除当前分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http
          .post("/api/root/cate/cateDel", { cate_id: id })
          .then((res) => {
            if (res.code == 1) {
              this.getCateList();
              this.$message({
                type: "success",
                message: "删除成功",
              });
            }
          });
      });
    },

    // 一级分类显示隐藏
    toShow(show, id) {
      console.log(id);
      let is_show = show == 1 ? 0 : 1;
      this.$http
        .post("/api/root/cate/setStatus", { cate_id: id, is_show })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getCateList();
            this.$message({
              type: "success",
              message: "操作成功",
            });
          }
        });
    },

    // 二级分类显示隐藏
    toShow1(show1, id) {
      let is_show = show1 == 1 ? 0 : 1;
      this.$http
        .post("/api/root/cate/setStatus", { cate_id: id, is_show })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.getCateList();
            this.$message({
              type: "success",
              message: "操作成功",
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
        });
    },

    // 新增按钮
    handerNewShop() {
      this.$router.push({ path: "/newPrimaryClass" });
    },
  },
};
</script>

<style lang="less" scoped>
@import "classList.less";
</style>
